<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, minimal-ui,user-scalable=no">
<title>FPE 在线投票 首页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="vendor/swiper/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
</head>
<body>
	
<!-- Overlay panel -->
<div class="body-overlay"></div>
<!-- Left panel -->
<div id="panel-left"></div>
<!-- Right panel -->
<div id="panel-right"></div>


<div class="page page--main" data-page="main">
	
	<!-- HEADER -->
	<header class="header header--page header--fixed">	
		<div class="header__inner">	
			<div class="header__icon header__icon--menu open-panel" data-panel="left"><span></span><span></span><span></span><span></span><span></span><span></span></a></div>
			<div class="header__logo header__logo--text"><a href="/toIndex">FPE <strong>在线投票</strong></a></div>
			<div class="header__icon open-panel" data-panel="right"><img src="assets/images/icons/white/search.svg" alt="" title=""/></div>
                </div>
	</header>
	
	
	<!-- PAGE CONTENT -->
	<div class="page__content page__content--with-header page__content--with-bottom-nav">
	      <h2 class="page__title">Welcome</h2>
              <p class="welcome">
                  仅在职员工才能参与,每个奖项<b style="color: red">只能提交一次</b>投票！
              </p>
              <h3>当前正在评选的奖项：(点击 <img style="width: 15px;height: 15px" src='assets/images/icons/blue/more.svg' alt='' title=''/> 进入投票)</h3>
              <div class="cards cards--12" id="vote-content">

              </div>
		<input type="text" id="displayLength" name="displayLength" class="layui-input" style="display: none;" placeholder="每页页数" value="12">
		<!--页面切换组件-->
		<div style="flex: 1" align="center">
			<div class="pageNav">
                 <span class="layui-breadcrumb" lay-separator="-" style="color:white;">
                   <a class="fristPage">首页</a>
                   <a class="lastPage">上一页</a>
                   <a><cite>第<span id="page"></span>页</cite></a>
                   <a class="totalPage"><cite>共<span id="total">0</span>页</cite></a>
                   <a class="nextPage">下一页</a>
                   <a class="endPage">尾页</a>
                 </span>
			</div>
		</div>
	
	</div>
			  



</div>
<!-- PAGE END -->
<!-- Bottom navigation -->
<div id="bottom-toolbar" class="bottom-toolbar">
</div>

<!-- Social Icons Popup -->
<div id="popup-social"></div>

<!-- Alert -->
<div id="popup-alert"></div>

<!-- Notifications -->
<div id="popup-notifications"></div>

<script src="vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="vendor/jquery/jquery.validate.min.js" ></script>
<script src="vendor/swiper/swiper.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/jquery.custom.js"></script>
<script>
	var layer = layui.layer;
	var form = null;
	var displayStart = 1;
	var endPage = null;

	window.onload=function (e) {
		if(sessionStorage.getItem('userName')==null||sessionStorage.getItem('workerNo')==null||sessionStorage.getItem('userName')==''||
				sessionStorage.getItem('workerNo')==''){
			layer.msg("请先验证您的职工信息...")
			setTimeout(function() {
				location.href = '/toLogin';
			}, 1000);
		}else {
			$.ajax({
				url: '' + '/ygzlw/loginCheck',
				method: 'POST',
				contentType: 'application/json',
				data: JSON.stringify({
					userName: sessionStorage.getItem('userName'),
					workerNo: sessionStorage.getItem('workerNo'),
					sfz: sessionStorage.getItem('sfz')
				}),
				success: function(res) {
					if (res.code != 200) {
						layer.msg(res.msg);
					} else {
						$('#userName_1').html(res.data.name)
						$('#userName_2').html(res.data.name)
						$('#workerNo').html(res.data.ghid)
						$('#dept').html(res.data.zlname)
						$('#zwName').html(res.data.zwname)
					}
				}
			})
		}
	}

	//查询奖项
	searchPrize(1)
	$('.fristPage').click(function() {
		searchPrize(1);
		return false;
	});
	$('.lastPage').click(function() {
		searchPrize((displayStart > 1 ? displayStart - 1 : 1));
		return false;
	});
	$('.nextPage').click(function() {
		searchPrize((displayStart < endPage ? displayStart + 1 : endPage));
		return false;
	});
	$('.endPage').click(function() {
		searchPrize(endPage);
		return false;
	})

	//奖项查询具体方法
	function searchPrize(index) {
		if (!index) var index = displayStart;
		$.ajax({
			url: '' + '/prize-info/listPrize',
			method: 'POST',
			contentType: 'application/json',
			data: JSON.stringify({
				displayStart:index,
				displayLength:$('#displayLength').val(),
				userName:sessionStorage.getItem('userName'),
                ghid:sessionStorage.getItem('workerNo')
			}),
			success: function(res) {
				//total=Math.ceil(res.data.records.length/10);
				$('#vote-content').empty();
				displayStart = res.data.current;
				endPage = res.data.pages;
				//list = res.data.records;
				for (var i = 0; i < res.data.records.length; i++) {
					$('#vote-content').append(
							"<div class='card card--style-icon card--style-round-corners'>" +
							"  <div class='card__icon'><img src='assets/images/icons/blue/user.svg' alt='' title=''/></div>" +
							"  <h4 class='card__title'>"+res.data.records[i].prizeName+checkStatus(res.data.records[i].voteStatus)+"</h4>" +
							"  <p class='card__text'>结束时间："+res.data.records[i].endTime.split('T')[0]+"</p>" +
							"  <p class='card__text'>预设名额："+res.data.records[i].allowAmounts+" 位</p>" +
							"  <div class='card__top-right-info'>" +
							"  <div class='card__more'><a style='cursor: pointer' onclick='voteIt(\"" + res.data.records[i].prizeNum + "\",\"" + res.data.records[i].prizeName + "\",\"" + res.data.records[i].allowAmounts + "\")'><img src='assets/images/icons/blue/more.svg' alt='' title=''/></a></div>" +
							"  </div>" +
							"</div>"
					);
				}
				if(res.data.records.length==0){
					$('#total').html(0)
				}else{
					$('#total').html(Math.ceil(res.data.records[0].allTotal/Number($('#displayLength').val())))
				}
				$('#page').html(displayStart)

			}
		})
	}
	
	function checkStatus(index) {
        switch (index) {
            case '0':
                return '<strong style="color: #ff1919;">(未投)</strong>';
            case '1':
                return '<strong style="color: #389E0D;">(已投)</strong>';
        }
    }

    var viewUrl=""
	function voteIt(data,name,size) {
        $.ajax({
            url: '' + '/nominee-info/getNominee',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                prizeNum:data,
                userName:sessionStorage.getItem('userName'),
                ghid:sessionStorage.getItem('workerNo')
            }),
            success: function(res) {
                if(res.code==200){
                    if(res.data.length!=0){
                        viewUrl=res.data[0].nginxIp
                    }
                    //请求成功，弹出选择界面
                    layer.open({
                        type: 2,
                        title: name+' —— 投票界面',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '/blog', //iframe的url
                        success: function () {
                            //获取弹出层的组件
                            $('iframe').contents().find('#size').html(size)
                            $('iframe').contents().find('#prizeNum_check').val(data)
                            $('iframe').contents().find('#size_check').val(size)
                            for (var i = 0; i < res.data.length; i++) {
                                //在弹出层罗列信息
                                $('iframe').contents().find('#loadlist-blog').append(
                                    "<div class='card card--style-thumb'>" +
                                    "   <div class='card__thumb card__thumb--round-corners-top mb-0'>" +
                                    "   <img src='"+viewUrl+res.data[i].photo+"' alt='' title=''/>" +
                                    "   <div class='card__top-right-info'>" +
                                    " <div class='card__more'><input type='checkbox' name='like' value='"+res.data[i].id+"' title='选择TA'></div>" +
                                    "   </div>" +
                                    "   </div>" +
                                    "   <div class='card__details card__details--bg card__details--round-corners-bottom'>" +
                                    "       <h4 class='card__title'>"+res.data[i].name+"</h4>" +
                                    "       <p class='card__text'>部门/职位："+res.data[i].zwname+"</p>" +
                                    "       <p class='card__text'>个人介绍："+res.data[i].introduce+"</p>" +
                                    "       <p class='card__text'>当前票数：<strong style='color: red'>"+res.data[i].votes+"</strong></p>" +
                                    "   </div>" +
                                    "</div>"
                                )
                            }
                        }
                    });
                }else{
                    //请求失败，弹出提示消息
                    layer.msg(res.msg)
                }
            }
        })
	}

</script>
</body>
</html>